<template>  
  <div class="form-container"> <!-- 添加一个类名用于应用Flexbox样式 -->  
    <el-form class="el-form">  
      <el-form-item label="用户名：" label-width="80px">  
        <el-input v-model="data.name" clearable placeholder="请填写用户名" />  
      </el-form-item>  
      <el-form-item label="密  码：" label-width="80px">  
        <el-input v-model="data.password" show-password placeholder="请输入密码" />  
      </el-form-item>  
      <div class="position-center">  
        <el-button class="el-button" type="primary" @click="login">登录</el-button>  
      </div>  
    </el-form>  
  </div>  
</template>

<script  setup>
    import { ref } from 'vue';  
    // import myModule from './API/htmlpost.js'; 
    const data = ref({  
      name: '',  
      password: ''  
    });  
    const login = () => {
      let longinUrl = app
  }
</script>  
  
<style>
  .form-container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  /* 假设你有一个特定的类名来应用这个样式，比如 .form-with-shadow */
  .el-form {
      /* 添加阴影效果 */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      width: 300px;
      height: 150px;
      /* 为了让边框看起来更立体，可以增加一些内边距 */
      padding: 20px;
      /* 你可以添加一些背景色，让立体效果更明显 */
      background-color: #fff;
      /* 边框圆角，可选 */
      border-radius: 8px;
      /* 边框样式，如果需要的话 */
      border: 1px solid #e4e7ed;
      /* Element UI 的默认边框颜色 */
      text-align: right;
      /* 将标签文本右对齐 */
      margin: 0 auto;
      /* 让表单居中 */
      position: relative;
      /* 鼠标悬停时增加阴影效果 */
      &:hover {
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
      }
  }
    .position-center {
      display: flex;
      justify-content: center;
      /* 水平居中 */
      align-items: center;
      /* 垂直居中 */
    
  }
</style>














































<!-- <template>
   <el-form label-width="80" style="width: 400px;">

    <el-form-item label="用户名"></el-form-item>
    <el-form-item  label="密码"></el-form-item>


   </el-form>
</template>  

<script>  
import { ElButton,ElForm,ElInput,ElTable,ElFormItem } from 'element-plus';  

export default {  
  components: {  
    ElButton,
    ElInput,
    ElTable,
    ElForm,
    ElFormItem,

  }  
}  
</script> -->